<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>

        <style>
            video {
                width: 320px;
                height: 240px;
                border: 1px solid black;
            }

            div {
                display: inline-block;
            }
        </style>
    </head>

    <body>
        <script src="js/adapter.js" type="text/javascript"></script>

        <script>
            var myVideoStream, myVideo;

            window.onload = function() {
                myVideo = document.getElementById("myVideo");

                getMedia();
            }

            //获取本地媒体
            function getMedia() {
                navigator.getUserMedia = navigator.getUserMedia || navigator.webkitGetUserMedia || navigator.mozGetUserMedia || navigator.msGetUserMedia;
                navigator.getUserMedia({"audio":true, "video":true}, gotUserMedia, didntGetUserMedia);
            }

            //成功获取媒体
            function gotUserMedia(stream) {
                myVideoStream = stream;

                //显示本地视频
                myVideo.srcObject = stream
            }

            function didntGetUserMedia() {
                console.log("couldn't get videp")
            }
        </script>

        <div id="setup">
            <P>WebRTC Demo--调用本地摄像头和麦克风</P>
        </div>
        <br/>

        <div style="width: 30%;vertical-align: top;">
            <div>
                <video id="myVideo" autoplay="autoplay" controls muted="true"></video>
            </div>
        </div>
    </body>
</html>